<template>
	<div class="main-container">
		<div class="content">
			<div v-if="userData.user.role === '老师'" class="data-section">
				<el-select v-model="selectedValue" placeholder="请选择学生" size="large" style="width: 240px; font: size 20px;" @change="big">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<div style="margin-bottom: 20px ">
					<el-table :data="scoreData" class="custom-table" style="width: 100%;">
						<el-table-column prop="subject" label="科目" />
						<el-table-column prop="score" label="成绩" />
					</el-table>
				</div>
				<div class="average-score-container">
					<p>总分: {{ calculateTotalScore() }}</p>
					<p>平均分: {{ calculateAverageScore() }}</p>
				</div>
				<div v-if="lowScores.length" class="low-score-warning">
					<h3>低分科目警告</h3>
					<ul>
						<li v-for="item in lowScores" :key="item.subject">
							{{ item.subject }}: {{ item.score }}分 - 建议加强练习
						</li>
					</ul>
				</div>
				<div v-if="highScores.length" class="high-score-notice">
					<h3>高分科目通知</h3>
					<ul>
						<li v-for="item in highScores" :key="item.subject">
							{{ item.subject }}: {{ item.score }}分 - 知识点掌握全面
						</li>
					</ul>
				</div>
			</div>
			<div v-if="userData.user.role === '学生'" class="data-section">
				<h3 class="stu-label">学生：{{ userData.user.username }}</h3>
				<div style="margin-bottom: 20px">
					<el-table :data="scoreData" class="custom-table" style="width: 100%">
						<el-table-column prop="subject" label="科目" />
						<el-table-column prop="score" label="成绩" />
					</el-table>
				</div>
				<div class="average-score-container">
					<p>总分: {{ calculateTotalScore() }}</p>
					<p>平均分: {{ calculateAverageScore() }}</p>
				</div>
				<div v-if="lowScores.length" class="low-score-warning">
					<h3>低分科目警告</h3>
					<ul>
						<li v-for="item in lowScores" :key="item.subject">
							{{ item.subject }}: {{ item.score }}分 - 建议加强练习
						</li>
					</ul>
				</div>
				<div v-if="highScores.length" class="high-score-notice">
					<h3>高分科目通知</h3>
					<ul>
						<li v-for="item in highScores" :key="item.subject">
							{{ item.subject }}: {{ item.score }}分 - 知识点掌握全面
						</li>
					</ul>
				</div>
			</div>
			<div id="echartsDom" class="chart-section"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		ElTable,
		ElTableColumn
	} from 'element-plus';
	import {
		getStorage
	} from "@/utils/localStorage.js";
	import {
		getscorebyid,
		getuserbyrole
	} from "@/api/getData";
	import * as echarts from 'echarts';

	const userData = JSON.parse(getStorage("userInfo"));
	const id = userData.user.userId;
	const selectedValue = ref('');
	const scoreData = ref([]);
	const lowScores = ref([]);
	const highScores = ref([]);
	const roledata = reactive({
		role: '学生'
	});
	const options = reactive([{
			value: 'stdname2',
			label: 'stdname'
		},
		{
			value: 'stdname1',
			label: 'stdname'
		},
		{
			value: 'stdname3',
			label: 'stdname'
		}
	]);

	const getstdallscore = async (id) => {
		try {
			const res = await getscorebyid(id);
			scoreData.value = res.datas;
			analyzeScores();
			console.log(res.datas);
		} catch (error) {
			console.error('获取成绩数据时出错:', error);
		}
	};

	const getusername = async () => {
		getuserbyrole(roledata).then(res => {
			console.log(res);
			res.datas.forEach((data, index) => {
				options[index].value = res.datas[index].user_id;
				options[index].label = res.datas[index].username;
				console.log(res.datas[index].user_id);
				console.log("----------------");
			});
		});
	};

	const big = (selectedValue) => {
		getstdallscore(selectedValue);
		render(selectedValue);
	};

	const calculateTotalScore = () => {
		if (scoreData.value.length === 0) return 0;
		const totalScore = scoreData.value.reduce((sum, item) => sum + item.score, 0);
		return totalScore;
	};

	const calculateAverageScore = () => {
		if (scoreData.value.length === 0) return 0;
		const totalScore = scoreData.value.reduce((sum, item) => sum + item.score, 0);
		return (totalScore / scoreData.value.length).toFixed(1); // 保留一位小数
	};

	const analyzeScores = () => {
		lowScores.value = scoreData.value.filter(item => item.score < 85);
		highScores.value = scoreData.value.filter(item => item.score >= 85);
	};

	const option = reactive({
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		radar: {
			indicator: [{
					name: '数学',
					max: 100,
					min: 60
				},
				{
					name: '英语',
					max: 100,
					min: 60
				},
				{
					name: '物理',
					max: 100,
					min: 60
				},
				{
					name: '化学',
					max: 100,
					min: 60
				},
				{
					name: '语文',
					max: 100,
					min: 60
				},
			]
		},
		series: [{
			name: 'Score',
			type: 'radar',
			data: [{
				value: [85, 75, 75, 75, 75],
				name: 'Scores'
			}]
		}]
	});

	const render = (id) => {
		getscorebyid(id).then(res => {
			console.log(res.datas[0].score);
			console.log(option.series[0].data[0].value);
			res.datas.forEach((data, index) => {
				option.series[0].data[0].value[index] = data.score;
			});

			let Mychart = echarts.init(document.getElementById('echartsDom'));
			Mychart.setOption(option);
		});
	};

	onMounted(() => {
		getstdallscore(id);
		render(id);
		getusername();
	});
</script>

<style scoped>
	html,
	body {
		height: 100%;
		margin: 0;
		overflow: hidden;
		/* 禁止滚动 */
	}

	.main-container {
		display: flex;
		justify-content: center;
		padding: 20px;
		background-color: #f5f5f5;
		/* 设置背景颜色为浅灰色 */
		height: 835px;
		overflow: hidden;
		/* 防止内部滚动 */
	}

	.content {
		margin-top: 50px;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.data-section {
		flex: 1;
		margin-right: 20px;
		overflow-y: auto;
		/* 如果内容溢出，允许内部滚动 */
	}

	.el-select {
		margin-bottom: 20px;
	}

	.average-score-container {
		font-size: 20px;
		margin-top: 20px;
	}

	.stu-label {
		margin-bottom: 20px;
		font-size: 25px;
	}

	.low-score-warning,
	.high-score-notice {
		margin-top: 20px;
		padding: 10px;
		border-radius: 5px;
	}

	.low-score-warning {
		background-color: #fff3e0;
		border: 1px solid #ffcc80;
	}

	.high-score-notice {
		background-color: #e0f7fa;
		border: 1px solid #80deea;
	}

	.chart-section {
		width: 30%;
		height: 600px;
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		padding: 20px;
	}

	@media (max-width: 1200px) {
		.content {
			flex-direction: column;
			align-items: center;
		}

		.data-section,
		.chart-section {
			width: 100%;
			margin: 10px 0;
		}

		.chart-section {
			height: 300px;
		}
	}



	.custom-table {
		font-size: 22px;
	}

	
</style>